<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <!-- 绑定姓名表单的变量 -->
      <input type="text" v-model="name"/>
    </div>
    <div>
      <span>年龄:</span>
      <!-- 绑定年龄表单的变量 -->
      <input type="number" v-model="age"/>
    </div>
    <div>
      <span>性别:</span>
      <!-- 绑定性别变量 -->
      <select v-model="sex">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <!-- 绑定添加修改点击事件 -->
      <button @click="btn">添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <!-- 遍历渲染数据生成结构 -->
        <tr v-for="(obj,index) in arr " :key="index">
          <td>{{index + 1}}</td>
          <td>{{obj.name}}</td>
          <td>{{obj.age}}</td>
          <td>{{obj.sex}}</td>
          <td>
            <!-- 绑定删除和编辑事件 -->
            <button @click="btn2(index)">删除</button>
            <button @click="btn1(index)">编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      name:'',
      age:'',
      sex:[],
      num:false,  //设定一个全局的变量,用于判断是否点击编辑按钮
      index:0,    //设定一个全局的索引,用于点击编辑以后通过当前索引进行修改原值
      arr:[
        {name:'Tom',age:19,sex:'男'},
        {name:'Jone',age:21,sex:'女'},
        ]
    }
  },
  methods:{
    btn(){
      if(this.name.trim() === '' || this.age === '' || this.sex === '' ) return alert('输入框内容不能为空！')
      // 如果全局变量为true的时候进行原值的修改操作,反之进行添加操作
      if(this.num) {
        // 修改操作
        this.arr[this.index].name = this.name
        this.arr[this.index].age = this.age
        this.arr[this.index].sex = this.sex
        this.num = false  //修改操作完成以后赋值为false,退出修改操作
      } else {
        // 添加操作
        this.arr.push({
        name:this.name,
        age:this.age,
        sex:this.sex,
      },
      )
      }
      // 添加修改完以后将表单清空
      this.name='',
      this.age='',
      this.sex=''
    },
    btn1(index){
      this.name =this.arr[index].name
      this.age =this.arr[index].age 
      this.sex= this.arr[index].sex
      this.num = true      //点击编辑按钮以后进行将全局变量num 设定为true
      this.index = index  //将当前的这一项索引号赋值给全局变量index
    },
    // 删除操作
    btn2(index){
       this.arr.splice(index, 1)
    },
  }
}
</script>
